const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports={
     //指定入口文件
     entry: './src/index.ts',

     //指定输出位置，ts会转换为js
     output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'//这里就是ts编译后生成的js
     },
     //module配置吧，不懂，先copy上
     module:{
        /**
         * Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
         * 所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader
         * 
         * 他们做两件不同的事情:
         * css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们
         * style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
         */
        rules:[
            {
                test:/\.ts$/,
                use:'ts-loader',
                exclude:/node-modules/
            },
            //设置less文件处理
            {
                test: /\.less$/,
                use:[//指定loader
                    //以下这些，loader这些是加载器，webpack打包用的
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    //引入三方库
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    mode:'development',
    //设置引用模块
    resolve:{
        extensions:['.js','.ts']
    }
};